/* eslint react/prefer-stateless-function:0, react/prop-types:0 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Button, Form, Input, Modal, Table } from 'antd';
import * as actions from '../../actions/categoryAction';
import Wrapper from './wrapper';
const FormItem = Form.Item;
const confirm = Modal.confirm;

@Form.create()
@connect(state => ({
  category: state.admin.category,
}), actions)
export default class extends Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.del = this.del.bind(this);
  }

  componentDidMount() {
    this.props.getCategory();
  }

  /**
   * 删除栏目
   * @param id
   */
  del(id) {
    const { del } = this.props;
    confirm({
      title: '确定删除此栏目?',
      content: (
        <div>
          <p>此栏目下的所有文章会被删除</p>
          <p>此栏目下的子栏目及所属的所有文章会被删除</p>
        </div>
      ),
      okText: '取消',
      okType: 'danger',
      cancelText: '确定删除',
      onOk() {
      },
      onCancel() {
        del(id);
      },
    });
  }

  /**
   * 更新数据
   * @param e
   */
  handleSubmit = (e) => {
    const { submit } = this.props;
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        submit();
      }
    });
  };

  render() {
    const { addMenu, changeRankName, category, form } = this.props;
    const { getFieldDecorator } = form;
    const expandedRowRender = ({ subMenu = [], id }) => {
      const columns = [
        {
          title: '排序',
          dataIndex: 'rank',
          key: 'id',
          width: 100,
          render: (text, record) => (
            <FormItem>
              {getFieldDecorator(`${record.parent_id}-${record.id}-rank`, {
                id: record.id,
                rules: [
                  { required: true, message: '请输入排序' },
                ],
                initialValue: text,
              })(
                <Input
                  onChange={e => changeRankName(e.target.value, record, 'rank')}
                  type="text"
                />
              )}
            </FormItem>
          ),
        },
        {
          title: '栏目名称',
          dataIndex: 'name',
          key: 'name',
          width: 200,
          render: (text, record) => (
            <FormItem>
              {getFieldDecorator(`${record.parent_id}-${record.id}-name`, {
                id: record.id,
                rules: [
                  { required: true, message: '请输入栏目名称' },
                ],
                initialValue: text,
              })(
                <Input
                  onChange={e => changeRankName(e.target.value, record, 'name')}
                  type="text"
                />
              )}
            </FormItem>
          ),
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          render: (text, record) => (
            <span className="table-operation">
              <a onClick={() => this.del(record.id)}>删除</a>
            </span>
          ),
        },
      ];

      return (
        <div>
          <div style={{ display: 'flex', margin: '10px 0' }}>
            <Button type="primary" size="small" style={{ fontSize: '12px' }}
                    onClick={() => addMenu(id)}>添加子栏目</Button>
          </div>
          <Table
            rowKey="id"
            size="small"
            columns={columns}
            dataSource={subMenu}
            pagination={false}
          />
        </div>
      );
    };
    const columns = [
      {
        title: '排序',
        dataIndex: 'rank',
        key: 'id',
        width: 100,
        render: (text, record) => (
          <FormItem>
              {getFieldDecorator(`${record.id}-rank`, {
                rules: [
                  { required: true, message: '请输入排序' },
                ],
                initialValue: text,
              })(
                <Input
                  onChange={e => changeRankName(e.target.value, record, 'rank')}
                  type="text"
                />
              )}
            </FormItem>
        ),
      },
      {
        title: '栏目名称',
        dataIndex: 'name',
        key: 'name',
        width: 200,
        render: (text, record) => (
          <FormItem>
              {getFieldDecorator(`${record.id}-name`, {
                rules: [
                  { required: true, message: '请输入栏目名称' },
                ],
                initialValue: text,
              })(
                <Input
                  onChange={e => changeRankName(e.target.value, record, 'name')}
                  type="text"
                />
              )}
            </FormItem>
        ),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        render: (text, record) => (
          <span className="table-operation">
            <a onClick={() => this.del(record.id)}>删除</a>
          </span>
        )
      },
    ];
    const { list } = category;
    return (
      <Wrapper openKeys="category" selectedKeys="all">
        <Button type="primary" style={{ marginBottom: '15px' }} onClick={addMenu}>添加栏目</Button>
        <div style={{ margin: '0 0 15px' }}>
          1、添加一级栏目后，请先点击底部更新数据，更新后再继续添加子栏目。
        </div>
        <div style={{ margin: '0 0 15px', textDecoration: 'underline' }}>
          2、没有子栏目的栏目，在首页点击栏目后，左侧会直接展示文章标题，后侧直接展示文章内容
        </div>
        <div style={{ margin: '0 0 15px', textDecoration: 'underline' }}>
          3、如果子栏目只有一篇文章，左侧点击栏目名称，后侧直接展示该栏目下的这篇独有的文章的内容
        </div>
        <Form onSubmit={this.handleSubmit} style={{ width: '500px' }}>
          {
            list && list.length > 0
              ?
              <Table
                rowKey="id"
                size="small"
                columns={columns}
                expandedRowRender={(curData) => (expandedRowRender(curData || {}))}
                dataSource={list}
                pagination={false}
              />
              : '加载中...'
          }
          <div style={{ display: 'flex', justifyContent: 'center', margin: '30px 0' }}>
            <Button size="large" type="primary" onClick={this.handleSubmit}>更新数据</Button>
          </div>
        </Form>
      </Wrapper>
    );
  }
}
